<!-- 物业报修 -->
<template>
  <div class="repair">
    <myheader title="物业报修" rightBtn="查看报修记录" @updataInfo="submitRecruit"></myheader>
    <img class="headImg" src="../../../assets/baocun.png" alt />
    <ul class="repair_ul">
      <li>
        <div>手机号：</div>
        <el-input type="number" v-model="repair.phone" placeholder="请输入手机号"></el-input>
      </li>
      <li>
        <div>详细地址：</div>
        <el-input type="textarea" placeholder="请输入地址" v-model="repair.address"></el-input>
      </li>
      <li>
        <div>详细描述：</div>
        <el-input type="textarea" placeholder="请输入描述" v-model="repair.describe"></el-input>
      </li>
      <li>
        <div>照片：（最多4张）</div>
        <van-uploader
          v-model="fileList"
          :max-count="4"
          multiple
          :after-read="afterRead"
          :before-read="beforeRead"
        >
          <template #preview-cover="{ file }">
            <div class="preview-cover van-ellipsis">{{ file.name }}</div>
          </template>
        </van-uploader>
      </li>
      <li></li>
      <li></li>
    </ul>

    <div class="repair_btn">
      <el-button type="primary" @click="upload">提交</el-button>
    </div>
  </div>
</template>

<script>
import { Notify } from 'vant'
import myheader from '../../../comon/myheader.vue'
import { checkPhone } from '../../../utils/tools'
export default {
  components: {
    myheader,
  },

  data() {
    return {
      repair: {
        userId: this.$store.getters.getUserInfo.id,
        phone: '',
        address: '',
        describe: '',
      },
      fileList: [],
      flag: false,
    }
  },

  methods: {
    // 上传预处理
    beforeRead(file) {
      const FileExt = file.name.replace(/.+\./, '')
      const isJPG = !(['jpg', 'png'].indexOf(FileExt.toLowerCase()) === -1)
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        Notify({
          type: 'danger',
          message: '上传头像图片只能是 JPG / png 格式!',
        })
      } else if (!isLt2M) {
        Notify({ type: 'danger', message: '上传头像图片大小不能超过 5M!' })
      } else {
        this.flag = true
      }
      return isJPG && isLt2M
    },
    // 文件上传
    upload() {
      if (this.repair.phone == '') {
        Notify({ type: 'warning', message: '请填写手机号码' })
      } else if (!checkPhone(this.repair.phone)) {
        Notify({ type: 'warning', message: '正确的手机号码' })
        return
      } else if (this.repair.describe == '') {
        return
      } else if (this.repair.address == '') {
        Notify({ type: 'warning', message: '填写地址' })
        return
      } else if (!this.flag) {
        Notify({ type: 'warning', message: '请选择上传图片' })
        return
      } else {
        let formData = new FormData()
        for (let index = 0; index < this.fileList.length; index++) {
          formData.append('imgFiles', this.fileList[index].file)
        }
        formData.append(
          'repair',
          new Blob([JSON.stringify(this.repair)], {
            type: 'application/json',
          })
        )

        this.$axios
          .post('/property/repair/save', formData, {
            headers: { 'Content-Type': 'multipart/form-data' },
          })
          .then((res) => {
            if (res.data.code == 200) {
              Notify({ type: 'success', message: '提交成功！' })
              this.repair.phone = ''
              this.repair.address = ''
              this.repair.describe = ''
              this.fileList = []
            }
          })
          .catch(() => {})
      }
    },

    submitRecruit() {
      this.$router.push('/repair_History')
    },
  },
}
</script>

<style scoped>
.repair_ul {
  padding: 3%;
  font-size: 0.42667rem;

  width: 100%;
}
.repair_ul > li > div:first-child {
  margin-bottom: 5px;
}
.repair_ul > li {
  margin-bottom: 10px;
}

/* 提交按钮 */
.repair_btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.headImg {
  width: 100%;

  margin-top: 46px;
}
</style>
